<template>
	<view class="content">
		<view class="search">
			<input type="search" v-model="search" placeholder="搜索" @keyup.13="searchClick(search)">
		</view>
		
		<view class="address">
			<view v-show="reminder" class="searchlistText">您搜索的用户查找不到...</view>
			<view class="address-wapper" v-for="item in addressList" :key="item.postID">
				<view class="title">{{item.postName}}</view>
				<view class="list-item" v-for="(son,sonindex) in item.employeeList" :key="sonindex" @click="onLookContact(son,item.postName)">
					<image :src="son.empImg||'../../../static/images/moren.png'" />
					<text>{{son.empName}}</text>
				</view>
			</view>
		</view>
		<page-load v-if="loadings"></page-load>
	</view>
</template>

<script>
	import util from '../../../utils/util.js'
	import {
		homeModule       
	} from '../../../modules/home.js' 
	import pageLoad from '../../../components/loading/pageLoad.vue'

	const home = new homeModule()
	export default {
		components:{
			pageLoad
		},
		data() {
			return {
				search: '',
				reminder: false,
				addressList: [],
				searchList: [],
				sateText: false,
				loadings: true
			};
		},
		watch: {
			search (text) {
				this._getLinkMan(text)
			}
		},
		onLoad() {
			this._getLinkMan()
		},
		methods: {
			_getLinkMan(text = '') {
				this.loadings = true
				home.getLinkMan(text) 
					.then((res) => {
						if (res.length != 0) {
							this.reminder = false
							res.forEach((item, index) => {
								item.employeeList.forEach((son, num) => {
									son.sate = false
								})
							})
							this.addressList = res
							this.loadings = false
						} else {
							this.reminder = true
							this.addressList = []
							this.loadings = false
						}
					})
			},
			onLookContact(item,postName) {
				item.postName = postName
				uni.navigateTo({
					url: `/pages/home/mailDetails/mailDetails?data=${JSON.stringify(item)}`
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "../../../common/scss/common.scss";

	.content {
		position: relative;

		.search {
			padding: 0 ws(15);
			display: flex;
			align-items: flex-start;
			height: ws(50);
			border-bottom: 1upx solid #eee;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			box-sizing: border-box;
			z-index: 10;
			background-color: #FFFFFF;

			input {
				flex: 1;
				background-color: #F7F7F7;
				font-size: ws(14);
				border-radius: ws(40);
				height: ws(35);
				text-align: center;
			}
		}

		.searchlistText {
			padding: ws(10) ws(15);
			font-size: ws(14);
			color: #bbb;
		}
		.address{
			margin-top: ws(50.5);
		}
		.address-wapper {
			.title {
				font-size: ws(12);
				color: #666;
				padding: ws(5) ws(15);
				background-color: #F7F7F7;
			}

			.list-item {
				display: flex;
				overflow: hidden;
				padding: ws(15);
				align-items: center;
				transition: .35s all;
				border-bottom: 1upx solid #eee;
				&:last-child{
					border-bottom: none;
				}
				image {
					width: ws(33);
					height: ws(33);
					border-radius: 50%;
				}

				text {
					margin-left: ws(15);
					font-size: ws(15);
				} 
			}

		}
	}

	.flex-between {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>
